<template>
<el-dialog :model-value="visible" title="注册账号">
    <el-form-item label="邮箱" :label-width="label_width">
        <el-input v-model="form.e_mail" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="真实姓名" :label-width="label_width">
        <el-input v-model="form.name" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="密码" :label-width="label_width">
        <el-input type="password" v-model="form.passwd" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="确认密码" :label-width="label_width">
        <el-input type="password" v-model="form.passwd_cf" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="验证码" :label-width="label_width">
        <el-input v-model="form.vf_code" autocomplete="off"/>
        <el-button
            type="primary"
            text
            @click="sendVFCode">
            发送验证码
        </el-button>
    </el-form-item>
    <el-form-item>
        <el-button
            style="margin: auto"
            type="primary"
            @click="register">
            注册
        </el-button>
    </el-form-item>
    <el-form-item>
        <el-button
            style="margin: auto"
            type="primary"
            text
            @click="turn2Login">
            已有账号？现在登录
        </el-button>
    </el-form-item>
</el-dialog>
</template>

<script>

import {ElMessage} from "element-plus";
import axios from 'axios';

export default {
    name: "RegisterPage",
    props: ['visible'],
    data() {
        return {
            label_width: '80px',
            form: {
                e_mail: '',
                name: '',
                passwd: '',
                passwd_cf: '',
                vf_code: ''
            }
        }
    },
    methods: {
        turn2Login: function () {
            this.$emit('turn_2_login')
        },
        sendVFCode: function () {
            ElMessage({
                message: '验证码已发送',
                type: 'success'
            })
        },
        register: function () {
            if (this.form.passwd != this.form.passwd_cf) {
                this.registerFail('密码不一致')
            } else {
                let registerForm = {
                    email: this.form.e_mail,
                    name: this.form.name,
                    password: this.form.passwd
                }
                const _this = this
                axios.post(process.env.VUE_APP_BASEURL + "user/register", registerForm).then(function (resp) {
                    if (resp.data.code == 0) {
                        _this.registerSuccess()
                    } else {
                        _this.registerFail(resp.data.msg)
                    }
                })
            }
        },
        registerSuccess: function () {
            this.$emit('turn_2_login')
            ElMessage({
                message: '注册成功',
                type: 'success'
            })
        },
        registerFail: function (message) {
            ElMessage({
                message: message,
                type: 'error'
            })
        }
    }
}
</script>

<style scoped>

</style>